<!-- playground-fold -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample</title>
</head>

<body style="background-color: var(--sapBackgroundColor); height: 350px;">
    <!-- playground-fold-end -->

    <ui5-button id="btnOpenBasic" end-icon="slim-arrow-down">Open Menu</ui5-button> <br>

    <ui5-menu id="menuSubs" opener="btnOpenBasic">
        <ui5-menu-item text="New File" icon="add-document"></ui5-menu-item>
        <ui5-menu-item text="New Folder" icon="add-folder" disabled></ui5-menu-item>
        <ui5-menu-item text="Open" icon="open-folder" starts-section>
            <ui5-menu-item text="Open Locally" icon="open-folder">
                <ui5-menu-item text="Open from C"></ui5-menu-item>
                <ui5-menu-item text="Open from D"></ui5-menu-item>
                <ui5-menu-item text="Open from E"></ui5-menu-item>
            </ui5-menu-item>
            <ui5-menu-item text="Open from Cloud"></ui5-menu-item>
        </ui5-menu-item>
        <ui5-menu-item text="Save" icon="save">
            <ui5-menu-item text="Save Locally" icon="save">
                <ui5-menu-item text="Save on C" icon="save"></ui5-menu-item>
                <ui5-menu-item text="Save on D" icon="save"></ui5-menu-item>
                <ui5-menu-item text="Save on E" icon="save"></ui5-menu-item>
            </ui5-menu-item>
            <ui5-menu-item text="Save on Cloud" icon="upload-to-cloud"></ui5-menu-item>
        </ui5-menu-item>
        <ui5-menu-item text="Close"></ui5-menu-item>
        <ui5-menu-item text="Preferences" icon="action-settings" starts-section></ui5-menu-item>
        <ui5-menu-item text="Exit" icon="journey-arrive"></ui5-menu-item>
    </ui5-menu>
    <!-- playground-fold -->
    <script type="module" src="main.js"></script>
</body>

</html>
<!-- playground-fold-end -->
